<template>
    <div class="platform">
        <my-tag :title="title" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm platform-formList">
                <div class="form-left-six">
                    <el-form-item label="材料商" prop="materialSupplierId">{{ form.materialSupplierName }}</el-form-item>
                    <el-form-item label="材料名称" prop="materialName">{{ form.materialName }}</el-form-item>
                    <el-form-item label="材料简述" prop="materialBriefly">{{ form.materialBriefly }}</el-form-item>
                    <el-form-item label="材料描述" prop="materialDesc">{{ form.materialDesc }}</el-form-item>
                    <el-form-item label="详细参数">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="ParamsName" label="名称" align="center" width="180"></el-table-column>
                            <el-table-column prop="description" label="描述" align="center"></el-table-column>
                        </el-table>
                    </el-form-item>
                    <el-form-item label="产品展示图" prop="showImage">
                        <ImagePreview v-for="(v, i) in form.showImage" :key="i" :width="100" :height="100" :src="v.url"
                            :preview-src-list="[v.url]" style="margin-right:10px;" />
                    </el-form-item>
                </div>
                <div class="form-right-four">
                    <el-form-item label="封面图片" prop="coverImageUrl">
                        <div class="coverImg-style">
                            <ImagePreview :width="250" :height="230" :src="form.coverImageUrl"
                                :preview-src-list="[form.coverImageUrl]" />
                        </div>
                    </el-form-item>
                    <el-form-item label="上传时间" prop="createTime">{{ form.createTime }}</el-form-item>
                    <div v-if="form.materialId && isAudit === 'audit'">
                        <el-form-item label="材料状态" prop="materialStatus" style="width:100%;min-width:300px;">
                            <el-select v-model="form.materialStatus" placeholder="请选择材料状态" size="large">
                                <el-option label="通过" :value="1" />
                                <el-option label="未通过" :value="2" />
                                <el-option label="已下架" :value="3" :disabled="form.rootId" />
                                <el-option label="待审核" :value="0" disabled />
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="form.materialStatus === 2" label="未通过原因：" prop="remark"
                            style="width:100%;min-width:300px;">
                            <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="form.remark"
                                @focus="remarkLimit = true" @blur="remarkLimit = false" :show-word-limit="remarkLimit"
                                maxlength="100" placeholder="请输入未通过原因" />
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <div class="platform-submit-btn">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="cancel">返 回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getImgUrl } from "@/api/decor/designer";
import { listMaterialSupplier } from "@/api/decor/materialSupplier";
import { getMaterial, updateMaterial } from "@/api/decor/materialAudit";
const remarkLimit = ref(false)
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const materialStoreSel = ref([]);
const title = ref('')
const isAudit = ref('')
const data = reactive({
    form: {},
    rules: {
        materialStatus: [
            { required: true, message: "请选择材料状态", trigger: "blur" }
        ],
        remark: [{ required: true, message: "未通过原因不能为空", trigger: "blur" }]
    }
});
const { form, rules } = toRefs(data);
// 获取材料商下拉框数据
const getMaterialStoreSel = () => {
    listMaterialSupplier({ materialSupplierStatus: 1 }).then((res) => {
        materialStoreSel.value = res.rows
    })
}
// 获取材料数据
(() => {
    const materialId = route.params.materialId
    title.value = route.params.origin === 'audit' ? '材料审核' : '材料详情'
    isAudit.value = route.params.origin
    if (materialId) {
        getMaterial(materialId).then((res) => {
            let materialAuditData = res.data;
            materialAuditData.showImage = '';
            materialAuditData.coverImageUrl = '';
            let imgUrlPromises = [];
            // 获取产品展示图的异步操作
            if (materialAuditData.materialShowcase) {
                let showImagePromise = getImgUrl(materialAuditData.materialShowcase).then((res) => {
                    materialAuditData.showImage = res.data;
                });
                imgUrlPromises.push(showImagePromise);
            }
            // 获取封面图片的异步操作
            if (materialAuditData.coverImage) {
                let coverImagePromise = getImgUrl(materialAuditData.coverImage).then((res) => {
                    materialAuditData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            // 等待所有的异步操作完成
            Promise.all(imgUrlPromises).then(() => {
                // 所有的异步操作完成后再更新 detailPlannerForm.value
                form.value = materialAuditData;
                tableData.value = JSON.parse(form.value.materialParams)
            });
        })
    }
})();

// 提交按钮
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            form.value.materialParams = JSON.stringify(tableData.value)
            if (form.value.materialId != null) {
                proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                    return updateMaterial(form.value);
                }).then(() => {
                    proxy.$modal.msgSuccess("提交成功");
                    router.go(-1)
                }).catch(() => { });
            }
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const cancel = () => {
    router.go(-1)
}
getMaterialStoreSel();
</script>
<style lang="scss" scoped>
.hoseType {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .hoseType-box {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .unit {
            font-family: NotoSansHans, NotoSansHans;
            font-weight: 600;
            font-size: 14px;
            color: #000000;
            line-height: 21px;
            font-style: normal;
            padding: 0 10px 0 4px;
        }
    }
}

.default-btn {
    width: 60px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    width: 110px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 6px;
    border: 1px solid #EF5A42;
    margin-top: 10px;
}

::v-deep(.el-button--primary.is-link, .el-button--primary.is-text) {
    width: 24px;
    height: 17px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #EF5A42;
    padding: 0;
}

.coverImg-style {
    width: 100%;

    ::v-deep(.el-upload-list--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload--picture-card) {
        width: 320px;
        height: 240px;
    }

    ::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 320px;
        height: 240px;
        border-radius: 8px;
        border: 1px solid #CDD4E0;
    }

}
</style>